<div nz-row>
  <div nz-col nz-col nzSpan="6">
    <nz-card>
      <nz-input-group [nzSuffix]="suffixIcon">
        <input type="text" nz-input placeholder="Search" [(ngModel)]="keyword" />
      </nz-input-group>
      <ng-template #suffixIcon>
        <i nz-icon nzType="search"></i>
      </ng-template>
      <nz-tree
        #rootResourcesTree
        [nzSearchValue]="keyword"
        [nzData]="rootResources"
        [nzAsyncData]="true"
        (nzExpandChange)="treeExpandChange($event.node!)"
      >
        <ng-template #nzTreeTemplate let-node>
          <span (mouseenter)="menu.hidden = false" (mouseleave)="menu.hidden = true">
            <a (click)="edit(node)">{{ node.title }} </a>
            <span #menu class="icons-list" [hidden]="true">
              <a nz-icon nzType="plus" (click)="add(node)" nz-tooltip nzTooltipTitle="新增子资源"></a>
              <a *ngIf="node.key !== '0'" nz-icon nzType="edit" (click)="edit(node)" nz-tooltip nzTooltipTitle="编辑资源"></a>
              <a
                *ngIf="node.isLeaf"
                nz-icon
                nzType="delete"
                nz-tooltip
                nzTooltipTitle="删除资源"
                nz-popconfirm
                nzPopconfirmTitle="是否确定删除？"
                nzPopconfirmPlacement="bottom"
                (nzOnConfirm)="delete(node)"
              ></a>
              <a
                nz-icon
                nzType="sync"
                [nzSpin]="node.isLoading"
                (click)="treeExpandChange(node, true)"
                nz-tooltip
                nzTooltipTitle="刷新资源"
              ></a>
            </span>
          </span>
        </ng-template>
      </nz-tree>
    </nz-card>
  </div>
  <div nz-col nzSpan="18">
    <nz-card>
      <app-sys-keyValue-edit [data]="selectResource"></app-sys-keyValue-edit>
    </nz-card>
  </div>
</div>
